
import { PureComponent } from 'react';
import { isNull, calcField } from '../../utils/helper';
import MAction from '../MAction/MAction';
interface Props {
  list?: any,
  color?: any,
  target?: any,
  strokeWidth?: any,
  percent?: any,
  desc?: any,
  componentStyle?: object,
  dataset_key?: string,
  event_key?: string
}
interface State {

}
export default class MiMiniProgress extends PureComponent<Props, State> {
  public state: State = {

  }
  renderText = (item, isHtml = true) => {
    if (isNull(item)) {
      return null;
    }
    else {
      let { list } = this.props;
      let { text, style } = item;
      text = calcField(text, list);
      if (isHtml) {
        return (
          <div style={style} dangerouslySetInnerHTML={{ __html: text }}></div>
        )
      }
      else {
        return text;
      }
    }
  }

  render() {
    let { color, target, strokeWidth, percent, desc, componentStyle } = this.props;
    let { list, dataset_key } = this.props;
    if (!isNull(dataset_key) && list instanceof Array) {
      return null;
    }
    color = isNull(color) ? "#1890ff" : color;
    strokeWidth = isNull(strokeWidth) ? 8 + 10 : strokeWidth + 10;
    percent = calcField(percent, list);
    target = calcField(target, list);

    return (
      <div data-flex="cross:center dir:left box:last" style={{ padding: '5px', ...componentStyle }} onClick={() => {
        MAction({ ...this.props }, this.props.event_key);
      }}>
        <div style={{ padding: "5px 0", height: strokeWidth + "px", position: "relative" }}>
          <div style={{ width: "100%", height: "100%", background: "#f5f5f5" }}>
            <div style={{ width: percent + "%", height: "100%", background: color }}>

            </div>
          </div>
          <div style={{ position: "absolute", left: target + "%", bottom: 0, top: 0 }}>
            <span style={{ width: "2px", height: "4px", background: color, display: "block" }}></span>
            <span style={{ width: "2px", height: "4px", background: color, display: "block", position: 'absolute', bottom: 0 }}></span>
          </div>
        </div>
        <div>
          {
            this.renderText(desc)
          }
        </div>

      </div>

    )
  }
}